<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22001010913刘文奇-二级页面</title>
    <link rel="stylesheet" href="liuwenqi2.css">
</head>
<body>
    <div class="liu-container">
        <header>
            <nav>
                <ul id="nav-items">
                    <!-- 导航菜单项会在这里动态填充 -->
                </ul>
            </nav>
        </header>

        <section class="liu">
            <div id="liu-section-title"></div>
            <div id="liu-event"></div>
        </section>

        <section class="liu-calendar" id="liu-calendar">
            <!-- 校园日历内容会在这里动态填充 -->
        </section>

        <section class="liu-company-list" id="liu-company-list">
            <h2>公司库</h2>
            <!-- 公司列表会在这里动态填充 -->
        </section>

        <div class="liu-footer">
            <p id="liu-footer-text"></p>
        </div>
    </div>

    <script>
        // 外部JSON数据的URL
        const url = "http://rap2api.taobao.org/app/mock/321651/2class";

        // 使用fetch获取数据并解析JSON
        fetch(url)
            .then(response => response.json())
            .then(data => {
                // 处理获取到的数据
                console.log(data);  // 打印返回的JSON数据到控制台，调试用

                // 填充导航菜单项
                const navItems = document.getElementById('nav-items');
                data.liu_container.header.nav_items.forEach(item => {
                    const li = document.createElement('li');
                    li.textContent = item;
                    navItems.appendChild(li);
                });

                // 填充校园日历部分
                const sectionTitle = document.getElementById('liu-section-title');
                const sectionEvent = document.getElementById('liu-event');
                sectionTitle.textContent = data.liu_container.liu_section.title;
                sectionEvent.textContent = '.宜 投递大厂 外出游玩';

                // 填充校园日历具体事件
                const calendar = document.getElementById('liu-calendar');
                data.liu_container.liu_section.events.forEach(day => {
                    const dateDiv = document.createElement('div');
                    dateDiv.classList.add('date');
                    dateDiv.innerHTML = `<strong>${day.date}</strong>`;
                    calendar.appendChild(dateDiv);

                    day.events.forEach(event => {
                        const eventDiv = document.createElement('div');
                        eventDiv.classList.add('event');
                        eventDiv.textContent = event;
                        calendar.appendChild(eventDiv);
                    });
                });

                // 添加剩余事件信息
                const remainingEvents = document.createElement('p');
                remainingEvents.textContent = data.liu_container.liu_section.remaining_events;
                calendar.appendChild(remainingEvents);

                // 填充公司库部分
                const companyList = document.getElementById('liu-company-list');
                data.liu_container.liu_company_list.companies.forEach(company => {
                    const companyDiv = document.createElement('div');
                    companyDiv.classList.add('liu-company');
                    companyDiv.innerHTML = `
                        <img src="img/清研.png" alt="${company.name}">
                        <div class="liu-company-details">
                            <strong>${company.name}</strong><br>
                            <span class="liuwenqi">${company.location} | ${company.industry} | ${company.size}</span><br>
                            <span class="wq">${company.positions.join(' | ')}</span>
                        </div>
                    `;
                    companyList.appendChild(companyDiv);
                });
             // 导航菜单项点击效果
             const navItemsList = document.querySelectorAll('#nav-items li');
        navItemsList.forEach(item => {
            item.addEventListener('click', function () {
                // 移除所有菜单项的选中状态
                navItemsList.forEach(i => i.classList.remove('active'));
                
                // 为当前点击的菜单项添加选中状态
                this.classList.add('active');
            });
        });
                // 填充页脚内容
                const footerText = document.getElementById('liu-footer-text');
                footerText.textContent = data.liu_container.liu_footer.text;
            })
            .catch(error => {
                console.error("Error fetching data:", error);
            });


    </script>
</body>
</html>
